@import './variable.scss';
@import './color.scss';

.tabbar {
    display: flex;
    height: $tabbar-height;
    background: #fff;
    position: fixed;
    bottom: 0rem;
    overflow: hidden;
    z-index: 9;
    width: 100%;

    .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;

        .iconimg {
            margin-bottom: .03rem;
            width: .48rem;
            height: .48rem;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;

            &.h1 {
                background-image: url("../../image/tabbar/h.png");
            }

            &.h2 {
                background-image: url("../../image/tabbar/m.png");
            }

            &.h3 {
                background-image: url("../../image/tabbar/goods.png");
            }

            &.h4 {
                background-image: url("../../image/tabbar/mys.png");
            }
        }

        .iconfont {
            font-weight: bold;
            font-size: .42rem;
        }

        .title {
            font-size: .2rem;
            font-weight: bold;
        }

        &.on {
            .title {
                color: black;
            }

            .iconimg {
                &.h1 {
                    background-image: url("../../image/tabbar/hsel.png");
                }

                &.h2 {
                    background-image: url("../../image/tabbar/msel.png");
                }

                &.h3 {
                    background-image: url("../../image/tabbar/goodssel.png");
                }

                &.h4 {
                    background-image: url("../../image/tabbar/myssel.png");
                }
            }
        }
    }
}